<template>
    <el-dialog :visible.sync="open" @close="close" :title="title" width="800px" destory-on-close>
        <el-form ref="elForm" :model="formData" size="small" label-width="100px" label-position="left">
            <el-row :gutter="15">
                <el-col :span="24">
                    <el-form-item label="执行人" prop="dept">
                        <span :style="{ marginRight: '15px' }" v-if="formData.userId != 0">{{ userName }}</span>
                        <el-button type="primary" size="mini" @click="handlePickRole">选择执行人</el-button>
                    </el-form-item>
                </el-col>
            </el-row>
            <el-row :gutter="15">
                <el-col :span="24">
                    <el-form-item label="任务内容" prop="location">
                        <el-input type="textarea" v-model="formData.taskContent" placeholder="请输入任务内容" :style="{ width: '100%' }" :rows="5"> </el-input>
                    </el-form-item>
                </el-col>
            </el-row>
            <el-row :gutter="15">
                <el-col :span="24">
                    <el-form-item label="辅助信息" prop="location">
                        <el-input type="textarea" v-model="formData.helpContent" placeholder="请输入辅助信息" :style="{ width: '100%' }" :rows="5"> </el-input>
                    </el-form-item>
                </el-col>
            </el-row>
            <el-row :gutter="15">
                <el-col :span="24">
                    <el-form-item label="任务时限" prop="location">
                        <TaskDDL :taskId="formData.id" :ddl="formData.ddl" @handleOk="handleDDLSet" />
                    </el-form-item>
                </el-col>
            </el-row>
            <el-row :gutter="15">
                <el-col :span="24">
                    <el-form-item label="任务附件" prop="location">
                        <uploader :files="attachList" @uploading="onUploaded" @onDownload="handleTaskAttachDownload" :canDelete="true" @onRemove="handleTaskAttachDel" />
                    </el-form-item>
                </el-col>
            </el-row>
        </el-form>
        <div slot="footer">
            <el-button @click="close">取消</el-button>
            <el-button type="primary" @click="handleConfirm">确定</el-button>
        </div>
        <staff-choose-dialog ref="staffChoose" :muilt="false" @Unitpersonnel="onStaffChoose" />
    </el-dialog>
</template>
<script>
import dialogMixin from "@/mixins/dialogMixin";
import StaffChooseDialog from "@/views/components/staffChooseDialog/index";
import Uploader from "@/views/components/uploader/index.vue";
import TaskDDL from "../module/TaskDDL.vue";
import { getTaskDetail } from "@/api/response/task";

export default {
    name: "TaskEditDialog",
    mixins: [dialogMixin],
    components: { StaffChooseDialog, Uploader, TaskDDL },
    props: {},
    data() {
        return {
            formData: {
                userId: 0,
                groupId: 0,
                taskContent: "",
                helpContent: "",
                ddl: 0,
                sort: 0,
            },
            userName: "",
            title: "",
            messageId: 0,
            messageContent: "",
            attachList: [],
        };
    },
    computed: {},
    watch: {},
    created() {},
    mounted() {},
    methods: {
        add() {
            this.formData = {
                taskId: 0,
                userId: 0,
                groupId: 0,
                taskContent: "",
                helpContent: "",
                ddl: 0,
                sort: 0,
            };
            this.userName = "";
            this.messageId = 0;
            this.messageContent = "";
            this.attachList = [];
            this.title = "新增指令任务";
            this.open = true;
        },
        edit(data) {
            // this.handleId = data.handleId;
            // this.formData = Object.assign({}, data);
            // this.userName = data.receiveUserName;
            // this.messageId = 0;
            // this.messageContent = "";
            // this.attachList = data.taskAttaches;
            // this.title = "修改指令任务";
            // this.open = true;
            getTaskDetail(data.id).then(res => {
                console.log(res);
                this.formData = res.data;
                this.formData.userId = res.data.receiveUser;
                this.formData.deptId = res.data.taskDept;
                this.formData.userName = res.data.receiveUserName;
                this.formData.deptName = res.data.taskDeptName;
                this.userName = res.data.receiveUserName;
                this.attachList = res.data.attachs || [];
                this.open = true;
            });
        },
        handleConfirm() {
            if (this.formData.taskContent == "") {
                this.$modal.msgError("请填写任务内容");
                return false;
            }
            if (this.formData.userId == 0) {
                this.$modal.msgError("请选择执行人");
                return false;
            }
            this.formData.messageId = this.messageId;
            let ids = [];
            this.attachList.forEach(a => {
                if (a.attachid != undefined) {
                    ids.push(a.attachid);
                } else {
                    ids.push(a.attachId);
                }
            });
            this.formData.attachIds = ids;
            this.$emit("handleOk", this.formData);
        },
        handlePickRole() {
            this.$refs.staffChoose.showDialog("选择任务执行人");
        },
        onStaffChoose(deptId, userId, user, dept) {
            this.formData.userId = userId;
            this.formData.deptId = deptId;
            this.formData.userName = user.userName;
            this.formData.deptName = dept.name;
            this.userName = user.userName;
        },
        onUploaded(data) {
            // 上传文件
            this.attachList.push(data);
        },
        handleTaskAttachDel(data) {
            // 根据attachId删除任务附件
            let index = this.attachList.findIndex(val => val.id == data.id);
            const TaskAttachApi = require("@/api/response/TaskAttach");
            TaskAttachApi.delTaskAttach(data.id).then(res => {
                this.attachList.splice(index, 1);
            });
        },
        handleTaskAttachDownload(row) {
            // 下载附件
            this.download(`com/ComAttach/download/${row.attachid}`, {}, `${row.attachname}.${row.attachtype}`);
        },
        handleDDLSet(taskId, timelimit) {
            console.log(typeof timelimit);
            this.formData.ddl = timelimit;
        },
    },
};
</script>
<style></style>
